<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>我要抢车位</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<style type="text/css">
	#searchForm{
		margin-top:50px;
	}
	#submitBtn{
		margin-left: 480px;
	}
	#carPortsTable{
		width: 1100px;
		margin-left: 0px;
		margin-top: 35px;
	}
	#wordsID{
		margin-left: 100px;
		color: RGB(91,192,222);
	}
	#firstTr{
		font-size:16px;
		font-weight:bold;
		color: RGB(91,192,222);
	}
	#noteArea{
		margin-left: 160px;
		margin-top: 20px;
	}
	#noteID{
		margin-left: 160px;
		margin-top: 10px;
	}
	#noteMessage{
		margin-left: 160px;
	}
	td{
		text-align: center;
	}
	.form-group{
		margin-top:40px;
	}
</style>
</head>
<body>

		<div class="form-group">
			<label for="dtp_input2" class="col-md-2 control-label ">租车开始时间：</label>
			<div class="input-group date form_datetime col-xs-3" data-date=""
				data-date-format="yyyy-mm-dd hh:ii" data-link-field="pactStartTime"
				data-link-format="yyyy-mm-dd hh:ii">
				<input id="pactStartTime" name="pactStartTime" class="form-control" type="text" value="" readonly> <span
					class="input-group-addon"><span
					class="glyphicon glyphicon-remove"></span></span> <span
					class="input-group-addon"><span
					class="glyphicon glyphicon-calendar"></span></span>
			</div><br />
		</div>
		<div class="form-group">
			<label for="dtp_input2" class="col-md-2 control-label">租车结束时间：</label>
			<div class="input-group date pactEndTime col-xs-3" data-date=""
				data-date-format="yyyy-mm-dd hh:ii" data-link-field="pactEndTime"
				data-link-format="yyyy-mm-dd hh:ii">
				<input id="pactEndTime" name="pactEndTime" class="form-control" type="text" id="showEndTime" value=""
					readonly> <span class="input-group-addon"><span
					class="glyphicon glyphicon-remove"></span></span> <span
					class="input-group-addon"><span
					class="glyphicon glyphicon-calendar"></span></span>
			</div><br />
		</div>
		<input type="button" class="btn btn-info" id="submitBtn" name="submitBtn" value="查询" />
	
	<spring:form action="addPurpose.do" method="post" commandName="purpose"
		 onsubmit="return checkNote()">
		<table id="carPortsTable" class="table table-striped table-bordered">
	  		<tr id="firstTr">
	  			<td>编号</td>
	  			<td>出租车位</td>
	  			<td>开始时间</td>
				<td>结束时间</td>
				<td>包租婆</td>
				<td>职业</td>
				<td>信誉度</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
		</table>
		<ul class="pager">
			<!-- 这个隐藏字段放的是跳转时候传递的UserID  -->
			<li><input type="hidden" id="userID" name="userID" value="${sessionScope.myRenter.user.userID }"></li>
			<li><input type="hidden" id="rentInfoID" name="rentInfoID"></li>
			<li><a href="javascript:void(0)" id="firstPage">首页</a></li>
			<li><a href="javascript:void(0)" id="pageUp">前一页</a></li>
			<li><label id="currentPage"></label><label>/</label><label
				id="pageCount"></label></li>
			<li><a href="javascript:void(0)" id="pageDown">后一页</a></li>
			<li><a href="javascript:void(0)" id="lastPage">末页</a></li>
		</ul>
		<label id="wordsID">留言区：</label>
		<br/>
		<textarea id="noteArea" name="note" rows="5" cols="60" style="resize:none;"
			onblur="checkNote()" onfocus="cleanMessage()"	></textarea>
		<br/><label id="noteMessage"></label><br/>
		<spring:errors path="note" delimiter="," id="noteID"></spring:errors>
		<br/>
	</spring:form>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" 
		charset="UTF-8"></script>
	<!-- <script type="text/javascript" src="../../js/jquery-3.1.0.min.js"></script> -->
	<script type="text/javascript" src="../Operator/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="../../js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
	<script type="text/javascript" src="../../js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

	<script type="text/javascript">
	$('.form_datetime').datetimepicker({
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
	    showMeridian: 1
	});
	$('.pactEndTime').datetimepicker({
	    language:  'zh-CN',
	    weekStart: 1,
	    todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2, 
		forceParse: 0,
	    showMeridian: 1
	});
		$(function (){
			init();
		})
		function init(){
			countPageCount();
			findCarPorts(1);
		}
		//通过当前页码显示 数据
		function findCarPorts(currentPage){
			var userID = $("#userID").val();
			var startTime = $("#pactStartTime").val();
			var endTime = $("#pactEndTime").val();
			$.ajax({
				type : "POST",
				url : "findOnePageCarPort.do", 
				data : {
					"currentPage" : currentPage,
					"userID":userID,
					"startTime":startTime,
					"endTime":endTime
					},
				success : function(result) {
					countPageCount();
					var table;
					for (var i = 0; i < result.length; i++) {
						var index = new Number(i + 1);
						var beginDate = new Date(result[i][3]);
						var endDate = new Date(result[i][4]);
						table = table
							+ "<tr id="+result[i][0]+"><td>"
							+ index+ "</td><td>"+ result[i][1]+ result[i][2]
							+ "</td><td>"
							+ beginDate.getFullYear()+"年"+(beginDate.getUTCMonth()+1)+"月"+
								(beginDate.getUTCDate()+1)+"日"+beginDate.getHours()+"时"
							+ "</td><td>"
							+ endDate.getFullYear()+"年"+(endDate.getUTCMonth()+1)+"月"+
								(endDate.getUTCDate()+1)+"日"+endDate.getHours()+"时"
							+ "</td><td>"
							+ result[i][5]
							+ "</td><td>"
							+ result[i][6]
							+ "</td><td>"
							+ result[i][7]
							+ "</td><td>"
							+ result[i][8]+"元"
							+ "</td><td><button type='submit' class='rentCarPortBtn btn btn-info'>预定</button></td></tr>";
					}
					$("#carPortsTable tr:gt(0)").remove();
					$("#carPortsTable").append(table);
				}
			});
		};
		//点击预定按钮
		$("#carPortsTable").on("click",".rentCarPortBtn",function(){
			var rentInfoID = $(this).parent().parent().attr("id");
			$("#rentInfoID").val(rentInfoID);
		})
		//查询按钮
		$("#submitBtn").on("click",function(){
			var startTime = $("#pactStartTime").val();
			var endTime = $("#pactEndTime").val();
			if(startTime != "" && endTime != ""){
				if(startTime >= endTime){
					alert("您选择的时间有误，请重新选择");
				}else{
					findCarPorts(1);
				}
			}else{
				findCarPorts(1);
			}
		})
		//计算车位总共有多少页面
		function countPageCount() {
			var userID = $("#userID").val();
			var startTime = $("#pactStartTime").val();
			var endTime = $("#pactEndTime").val();
			//需要将查询的开始时间和结束时间一起传过去  在controller判断，为空  调用查所有   不为空   查满足条件的
			$.ajax({
				type : "POST",
				url : "countCarPortPageCount.do", 
				async : false,
				data : {
					"userID":userID,
					"startTime":startTime,
					"endTime":endTime
				},
				success : function(pageCount) {
					$("#pageCount").html(pageCount);
					var currentPage = $("#currentPage").html();
					if(pageCount == 0 ){
						$("#currentPage").html(0);
					}else if(currentPage != "" && currentPage != 0){
						$("#currentPage").html(currentPage);
					}else{
						$("#currentPage").html(1);
					}
				}
			});
		}
		//分页的四个按钮功能  方法
		$("#firstPage").on("click", function() {
			var pageCount = $("#pageCount").html();
			if(pageCount == 0){
				$("#currentPage").html(0);
			}else{
				$("#currentPage").html(1);
			}
			findCarPorts(1);
		})
		$("#pageUp").on("click", function() {
			var currentPage = $("#currentPage").html();
			var pageCount = $("#pageCount").html();
			if (currentPage > 1) {
				currentPage = currentPage - 1;
			} else if(pageCount == 0){
				currentPage = 0;
			}
			$("#currentPage").html(currentPage);
			findCarPorts(currentPage);
		})
		//下一页
		$("#pageDown").on("click", function() {
			var currentPage = $("#currentPage").html();
			var pageCount = $("#pageCount").html();
			if (currentPage >= pageCount) {
				$("#currentPage").html(pageCount);
			} else {
				var newPage = new Number(currentPage)+1;
				$("#currentPage").html(newPage);
			}
			currentPage = $("#currentPage").html();
			findCarPorts(currentPage);
		})
		$("#lastPage").on("click", function() {
			var pageCount = $("#pageCount").html();
			$("#currentPage").html(pageCount);
			findCarPorts(pageCount);
		})
		function checkNote(){
			var note = $("#noteArea").val();
			var reg = /^[\u2E80-\u9FFF_-]{3,20}$/;
			if(!reg.test(note)){
				$("#noteMessage").html("留言应该在3-20个汉字或字符之间");
				return false;
			}else{
				return true;
			}
		}
		function cleanMessage(){
			$("#noteMessage").html("");
		}
	</script>
</body>
</html>